import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { RouteRecordRaw } from 'vue-router'
import { staticRoutes, notFindRoute } from '@/router'
import { mapTree } from 'xe-utils'
// import { transformPathToName } from '@/utils'
import { useUserStore } from '@/store'

// 匹配views里面所有的.vue文件
const modules = import.meta.glob('@/views/**/*.vue')


/**
 * @description 前端来做排序、格式化
 * @params {menus} 后端返回的路由数据，已经根据当前用户角色过滤掉了没权限的路由
 * 1. 对后端返回的路由数据进行排序，格式化
 * 2. 同时将component由字符串转成真正的模块
 */
const formatAsyncRoutes = (menus: any[]) => {
  if (!menus.length) return []
  // menus.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0)) // 排序
  const routes = <RouteRecordRaw[]>mapTree(menus, (item) => {
    // if (item.children && item.children.length) {
    //   item.children.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0)) // 排序
    // }
    return {
      path: item.path,
      name: item.name,
      component: modules[`/src/views${item.path}.vue`] || modules[`/src/views${item.path}/index.vue`],
      // redirect: item.redirect,
      // meta: {
      //   hidden: item.hidden,
      //   keepAlive: item.keepAlive,
      //   title: item.title,
      //   svgIcon: item.svgIcon,
      //   icon: item.icon,
      //   affix: item.affix,
      //   breadcrumb: item.breadcrumb,
      //   showInTabs: item.showInTabs,
      //   activeMenu: item.activeMenu,
      //   alwaysShow: item.alwaysShow
      // }
    }
  })
  return routes
}




const storeSetup = () => {
  const userStore = useUserStore()
  // 所有路由(常驻路由 + 动态路由)
  const routes = ref<RouteRecordRaw[]>([])
  // 动态路由(异步路由)
  const asyncRoutes = ref<RouteRecordRaw[]>([])

  // 合并路由
  const setRoutes = (data: RouteRecordRaw[]) => {
    routes.value = staticRoutes.concat(data)
    asyncRoutes.value = data
    // console.log('路由', toRaw(routes.value))
  }

  // 生成路由
  const generateRoutes = (): Promise<RouteRecordRaw[]> => {
    return new Promise((resolve) => {
      // 向后端请求路由数据 这个接口已经根据用户角色过滤了没权限的路由(后端根据用户角色过滤路由显得比较安全些)
      userStore.getInfo('admin').then((res: any) => {
        const asyncRoutes = formatAsyncRoutes(res.menuList)
        setRoutes([...asyncRoutes, notFindRoute])
        resolve([...asyncRoutes, notFindRoute])
      })
    })
  }

  return {
    routes,
    asyncRoutes,
    generateRoutes
  }
}

export const useRouteStore: any = defineStore('route', storeSetup)